<!--
 * Copyright ©
 * # swiper 组件只能滑动，不能点击分页，不能自动分页，没去研究，毕竟是淘汰的产品
 * @author: zw
 * @date: 2021-12-05 
 -->

<template>
  <div class="swiper-container" ref="swiperRef">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="carousel in list" :key="carousel.id">
        <img :src="require(`@/assets${carousel.imgUrl}`)" />
      </div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</template>

<script lang="js">
import { defineComponent, onMounted, ref } from 'vue'
import Swiper from "swiper";
export default defineComponent({
  name: 'Carousel',
  props: {
    list: { required: true, type: Object }
  },
  setup(props, {emit, slots}) {
    const swiperRef = ref(null);
    onMounted(() => {
        new Swiper(swiperRef.value, {
          loop: true,
          autoPlay: true,
          pagination: { el: ".swiper-pagination", clickable: true },
          navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
          },
        });
    });
   return {
     swiperRef
    }
   }
})
</script>

<style lang="css" scoped></style>
